<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>通过wfs查询数据</title>
  <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
</head>
<body>
<div id="map"></div>
</body>
<script src="../js/lib/ol4.6.4/ol.js"></script>
<script src="../js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
  // 服务配置，命名空间、图层、服务地址等
  var geoserverData = {
    wsName: 'test',
    uri: 'http://www.openplans.org/test',
    wfsURL: 'http://localhost:8085/geoserver/wfs?',
    layer: 'port'
  }

  //this.geoserverLayerName  为在geoserver 添加的图层
  //测试数据 添加WFS数据  添加所有
  var wfsSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function (extent) {
      return (
              geoserverData.wfsURL + 'service=WFS&version=1.1.0&request=GetFeature&typeName=' +
              geoserverData.wsName + ":" +
              geoserverData.layer + '&' + 'outputFormat=application/json&srsname=EPSG:4326&bbox=' +
              extent.join(',') + ',EPSG:4326');
    },
    strategy: ol.loadingstrategy.bbox
  });

  let wfsLayer = new ol.layer.Vector({
    title: 'add WFS',
    source: wfsSource,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
          color: "#389BCD",
          opacity: 0.5,
        }),
      }),
    })
  })

  var wfsFilter = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
          color: "#d90000",
          opacity: 0.5,
        }),
      }),
    })
  });

  var layers = [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
                    url: "https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
                })
    }),wfsLayer,wfsFilter
  ];

  var map = new ol.Map({
    target: 'map',
    layers: layers,
    view: new ol.View({
      projection: "EPSG:4326",
      center: [114, 31],
      zoom: 4
    })
  });

  // 查询过滤图层
  function findData() {
    var data = {
      srcName: 'EPSG:4326',
      featureNS: geoserverData.uri,
      featurePrefix: geoserverData.wsName,
      featureTypes: [geoserverData.layer],
      outputFormat: 'application/json',
      // 查询方式就和写 SQL 一样
      filter: ol.format.filter.and(
              ol.format.filter.like('porttype', '沿海'),
              ol.format.filter.equalTo('name', '珠海港')
      )
    }
    var request = new ol.format.WFS().writeGetFeature(data)
    fetch(geoserverData.wfsURL, {
      method: 'POST',
      body: new XMLSerializer().serializeToString(request),
    }).then(function (response) {
      return response.json()
    }).then(function (json) {
      console.log(JSON.stringify(json, null, "\t"))
      var features = new ol.format.GeoJSON({
        geometryName: 'geom',
      }).readFeatures(json)
      if (wfsFilter) {
        wfsFilter.getSource().addFeatures(features)
      }
    })
  }
  findData();

</script>
</html>
